<template>
  <div class="container">
    <goods-box v-for="item in goodsList"
               :key="item._id"
               :id="item._id"
               :imgSrc="item.goodsImages[0].url"
               :imgAlt="item.goodsImages[0].name"
               :goodsName="item.goodsName"
               :goodsPrice="item.goodsPrice"
               :goodsOrigin="item.goodsOrigin"
               :goodsUser="item.goodsUser">
    </goods-box>
  </div>
</template>

<script>
import GoodsBox from "@/components/common/GoodsBox"
export default {
  components: {
    GoodsBox
  },
  props: ['isShow'],
  data () {
    return {
      goodsList: [],
    }
  },
  created () {
    this.$http.get('http://localhost:3000/goodsList').then(response => {
      this.goodsList = response.data.data;
    });
  },
  watch: {
    isShow (val) {
      if (val == "猜你喜欢") {
        this.$http.get('http://localhost:3000/goodsList').then(response => {
          this.goodsList = response.data.data;
        })
      } else {
        this.$http.post('http://localhost:3000/goodsClassify', { classify: val }).then(response => {
          this.goodsList = response.data.data;
        })
      }
    }
  },
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  width: 1060px;
}
</style>